<!DOCTYPE html>
<html>

<head>
    <#include "/yq/admin/components/meta.html" />
    <title>蓁奕科技 ${metaTitleSuffix!}</title>
    <#include "/yq/admin/components/stylesheets.html" />
    <style>
        .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .pw-strength-wrap {
        display: flex;
        align-items: center;
    }

    .pw-strength-box {
        margin-left: 10px;
        height: 10px;
        width: 150px;
        border: 1px solid #ccc;
        padding: 2px;
    }
    </style>
</head>

<body>
    <div id='app'>
        <el-container>
            <#assign menuIndex="4-2" />
            <#include "/yq/admin/components/menu.html" />
            <el-container>
                <#include "/yq/admin/components/header.html" />
                <el-main>
                    <template>
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-row>
                                <el-form-item label="APP" v-if="${userRole!2} === 0">
                                    <el-select v-model="form.appId" placeholder="请选择" :disabled="form.appId">
                                        <el-option v-for="item in apps" :key="item.id" :label="item.name" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="名称">
                                    <el-input v-model="form.name"></el-input>
                                </el-form-item>
                                <el-form-item label="登录名">
                                    <el-input v-model="form.account"></el-input>
                                </el-form-item>
                                <el-form-item label="密码">
                                    <el-input v-model="form.password" @input="checkPwStrength"></el-input>
                                    <div class="pw-strength-wrap">
                                        <span>密码强度</span>
                                        <div class="pw-strength-box">
                                            <div v-bind:style="pwStrengthStyle"></div>
                                        </div>
                                    </div>
                                </el-form-item>
                                <el-form-item label="权限">
                                    <el-select v-model="form.role" placeholder="">
                                        <el-option label="超级管理员" :value="0" disabled v-if="${userRole!2} == 0">
                                        </el-option>
                                        <el-option label="管理员" :value="1" :disabled="${userRole!2} === 2" v-if="${userRole!2} == 0 || ${userRole!2} == 1">
                                        </el-option>
                                        <el-option label="商户" :value="2">
                                        </el-option>
                                        <el-option label="核销员" :value="4">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="商户">
                                    <el-select v-model="form.shopId" placeholder="" filterable clearable :disabled="${userRole!2} === 2">
                                        <el-option v-for="item in shops" :key="item.id" :label="item.name" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="手机">
                                    <el-input v-model="form.mobile"></el-input>
                                </el-form-item>
                                <el-form-item label="状态">
                                    <el-radio-group v-model="form.status">
                                        <el-radio :label="1">正常</el-radio>
                                        <el-radio :label="0">禁用</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="onSubmit" :disabled="form.role == 0">保存</el-button>
                                </el-form-item>
                            </el-row>
                        </el-form>
                    </template>
                </el-main>
            </el-container>
        </el-container>
        <#include "/yq/admin/components/footer.html" />
    </div>
    <#include "/yq/admin/components/scripts.html" />
    <#include "/components/qiniu.html" />
    <script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                form: ${data!'{}'},
                shops: ${shops!'[]'},
                pwStrength: 0,
                pwStrengthStyle: {
                    background: '',
                    height: '10px',
                    width: '0'
                },
                apps: toJson(`${apps!}`)
            }
        },
        watch: {
            pwStrength: function(val) {
                if (val == 0) {
                    this.pwStrengthStyle.background = '';
                    this.pwStrengthStyle.width = '0';
                } else if (val == 1) {
                    this.pwStrengthStyle.background = 'red';
                    this.pwStrengthStyle.width = '50px';
                } else if (val == 2) {
                    this.pwStrengthStyle.background = 'orange';
                    this.pwStrengthStyle.width = '100px';
                } else if (val == 3) {
                    this.pwStrengthStyle.background = 'green';
                    this.pwStrengthStyle.width = '150px';
                }
            }
        },
        mounted: function() {
            if (this.form.password) {
                this.checkPwStrength(this.form.password);
            }
        },
        methods: {
            onSubmit() {
                if ('${userRole!2}' === '0' && !this.form.appId) {
                    msg("请选择APP");
                    return;
                }
                if (!this.form.name) {
                    msg("请输入名称");
                    return;
                }
                if (!this.form.account) {
                    msg("请输入登录名");
                    return;
                }
                if (!this.form.password) {
                    msg("请输入密码");
                    return;
                }
                if (this.form.role === '') {
                    msg("请选择权限");
                    return;
                }
                if (/[^0-9a-zA-Z_]/.test(this.form.account)) {
                    msg("登录名只能包含英文字母和数字");
                    return;
                }
                var param = {
                    id: this.form.id,
                    name: this.form.name,
                    account: this.form.account,
                    password: this.form.password,
                    role: this.form.role,
                    shopId: this.form.shopId,
                    mobile: this.form.mobile,
                    status: this.form.status,
                    appId: this.form.appId
                }
                var url = ''
                var ref = '${referer!""}'
                var url = '/yq/admin/shopUser/submit'
                axiosRequest(param, url, ref)
            },
            checkPwStrength(val) {
                var lvl = 0;
                if (/[0-9]/.test(val)) {
                    lvl++;
                }
                if (/[a-zA-Z]/.test(val)) {
                    lvl++;
                }
                if (/[^0-9a-zA-Z_]/.test(val)) {
                    lvl++;
                }
                this.pwStrength = lvl;
            }
        },
        filters: {
            fmt(date) {
                return date
            }
        }
    })
    </script>
    <script>
    </script>
</body>

</html>